<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="icon" href="/image/favicon.ico" type="image/x-icon">
	<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style type="text/css">
		*{
			text-decoration: none;
			list-style: none;
		}
		.message{
			width: 100%;
			box-sizing: border-box;
			padding-left: 30px;
			padding-right: 30px;
		}
		.pagehead{
			background-color: #f5f5f5;
			height: 40px;
		}
		.pagehead h1{
			margin: 0;
			font-size: 18px;
			line-height: 40px;
			padding-left: 12px;
		}
		#bottom{
			margin-top: 20px;
			border-bottom: 2px solid #ff8c00;
		}

		.media{
			padding-top: 5px;
		}
		
		.message{
			color: #330000;
		}
		.img{
			float: left;
			margin-right: 20px;
		}
		.img img{
			width:50px; 
			height:50px; 
			border-radius:50%; 
			overflow:hidden;
		}
		.media-heading{
			color: #CC9900;
		}
		.media-heading:hover{
			color: red;
		}
		.aa{
			border: 1px solid #cccccc;
			width: 20%;
			display:none;	
			margin-bottom: 0;
			clear: both;
			position: absolute;
			background-color: #FFFF66;
			margin: 0;
		}
		.aa img{
			width:50px; 
			height:50px; 
			border-radius:50%; 
			overflow:hidden;
		}
		.buttom{
			border-bottom: 1px solid #cccccc;
			margin-bottom: 20px;
			margin-top: 10px;
		}
		.fenye{
			margin-left: 33%;
			margin-top: -20px;
		}
		#lu{
			margin-bottom: 10px;
		}

	</style>
</head>
<body onload="f1()">
	<div class="message">
		<div class="pagehead" >
			<h1>
				<i class="fa fa-child" style="color: blue;"></i>&nbsp;&nbsp;您当前的位置：<a href="adminUsermessage.html">用户反馈</a>
			</h1>
		</div>
		<div id="bottom"></div>
		<input type="text" name="page" value="" id="lu"  hidden="hidden">  <!-- 记录的是当前页 -->
		<div class ="media_message">
			

		</div>
		<div class="fenye">
			<ul class="pagination">
				<li><a href="#" onclick="findByPage(0)">首页</a></li>
				<li><a href="#" onclick="findByPage1()">上一页</a></li>
				<li><a href="#" onclick="findByPage2()">下一页</a></li>
				<li><a href="#" onclick="findByPage3()">尾页</a></li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
	<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/ejs.min.js"></script>

	<script type="text/javascript">


		//表示上一页，当上一页等于0时，继续上一页后还是停在第一页
		function findByPage1(){
			var x=$('#lu').val();
			if(x>0){
				x--;
			}else{
				alert("已经是第一页了");
			}
			$('#lu').val(x);
			var page = {page:x};
			$.ajax({
				url:'/pan/message/all',
				type:'POST',
				data:page,
				success: function (data) {
					var template = $('#user_message').html();
					var resultText = ejs.render(template,data);
					$('.media_message').html(resultText);
					console.log(data);
				},
				error: function (err) {
					console.log(err);
				}
			});
		}
		//表示下一页，下一页一直点击到总页数截止
		function findByPage2(){
			var x=$('#lu').val();
			if(x<$('.sou2').val()-1){  /*拿到隐藏域里面的最大记录总数*/
				x++;
			}else{
				alert("已经是最后一页了")
			}	
			$('#lu').val(x);
			var page = {page:x};
			$.ajax({
				url:'/pan/message/all',
				
				type:'POST',
				data:page,
				success: function (data) {
					if(data!==null){
						var template = $('#user_message').html();
						var resultText = ejs.render(template,data);
						$('.media_message').html(resultText);
						$('img').on('mouseenter',function(){
							$(this).parents('.meta').find('.aa').show();
						});

						$('img').mouseout(function(){
							$(this).parents('.meta').find('.aa').hide();
						});
					}
					console.log(data);
				},
				error: function (err) {
					console.log(err);
				}
			});
		}

		//调到首页直接通过body里面的onload="f1()"方法加载到第一页的数据
		function f1(){
			findByPage(0);
		}
		//第一页即首页
		function findByPage(messagePage){
			$('#lu').val(messagePage);
			var page = {page:messagePage};
			$.ajax({
				url:'/pan/message/all',
				type:'POST',
				data:page,
				success: function (data) {
					var template = $('#user_message').html();
					var resultText = ejs.render(template,data);
					$('.media_message').html(resultText);
					$('img').on('mouseenter',function(){
						$(this).parents('.meta').find('.aa').show();
					});

					$('img').mouseout(function(){
						$(this).parents('.meta').find('.aa').hide();
					});
					console.log(data);
				},
				error: function (err) {
					console.log(err);
				}
			});
		}
		//尾页
		function findByPage3(){
			var formPage=($('.sou2').val()-1);
			findByPage(formPage);
		}

		
		$.get('/pan/message/all',function(data){
			var template = $('#user_message').html();
			var resultText = ejs.render(template,data);
			$('.media_message').html(resultText);


			$('img').on('mouseenter',function(){
				$(this).parents('.meta').find('.aa').show();
			});

			$('img').mouseout(function(){
				$(this).parents('.meta').find('.aa').hide();
			});
			
		});

		function formatDate1(date){
			date = new Date(date);
			var add0 = function(num){
				if(num < 10) return "0" + num;
				return "" + num;
			};
			var dateStr = "";
			dateStr += date.getFullYear() + "-";
			dateStr += add0(date.getMonth() + 1) + "-";
			dateStr += add0(date.getDate()) + " ";
			dateStr += add0(date.getHours()) + ":";
			dateStr += add0(date.getMinutes()) + ":";
			dateStr += add0(date.getSeconds());
			return dateStr;
		}
		function formatDate2(date){
			date = new Date(date);
			var add0 = function(num){
				if(num < 10) return "0" + num;
				return "" + num;
			};
			var dateStr = "";
			dateStr += date.getFullYear() + "-";
			dateStr += add0(date.getMonth() + 1) + "-";
			dateStr += add0(date.getDate()) + " ";
			return dateStr;
		}
		Date.prototype.format = function(){
			return formatDate(this);
		};
		
	</script>

	<script id="user_message" type="text/templet">
		<% if (data.length) { %>
		<%
		for(var i in data){
		%>
		<div class="meta">
			<div class="media">
				<div class="img"><img src="<%=data[i].user.userPhoto%>" class="media-object" alt='' />
				</div>
				<div class="media-heading">
					<%=data[i].user.userName%><br>
					<%=formatDate1(data[i].messageTime)%>
				</div> 
				<div class="message"> <%=data[i].messageContent%> </div>
			</div>
			<div class="aa">
				<ul>
					<li><img src="<%=data[i].user.userPhoto%>">&nbsp;&nbsp;<%=data[i].user.userName%></li>
					<li>用户名称：<%=data[i].user.userName%></li>
					<li>用户邮箱：<%=data[i].user.userEmail%></li>
					<li>注册时间：<%=formatDate1(data[i].user.registerTime)%></li>

					<!-- 用来存储前端传过来的总记录条数 -->
					<td > <input hidden="hidden" class="sou2" value="<%=data[i].yeshu%>"></td>
				</ul>
			</div>
			<div class="buttom"></div>

		</div>
		<%
	}
	%>
	<% } %>
</script>

</body>
</html>